<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>vue路由的嵌套和参数的传递</title>
	<script src="js/vue.min.js"></script>
	<script src="js/vue-router.min.js"></script>
	<style type="text/css">
	.active{
		color:red;
		font-size: 20px;
		text-decoration:none;
	}
</style>
</head>
<body>
	<div class="container">
		<div>
			<router-link to="/home">主页</router-link>
			<router-link to="user">用户</router-link>
		</div>
		<div>
			<router-view></router-view>
		</div>
		<hr>
		<button @click="push">添加路由</button>
		<button @click="replace">替换路由</button>
	</div>

	<template id="user">
		<div>
			<h3>用户信息</h3>
			<ul>
				<li><router-link to="/user/login?name=Tom&pwd=123" tag="li">用户登陆。。。</router-link></li>
				<li><router-link to="/user/regist/alice/456" tag="li">用户注册。。。</router-link></li>
			</ul>
			<router-view></router-view>
		</div>
	</template>
	<script>
        //1.定义模板组件
        var Home = {
        	template:'<h2>我是主页</h2>'
        }
        var User = {
        	template:'#user'
        }
        var Login = {
        	template:"<h4>用户登陆111。。。获取参数：{{$route.query}} , {{$route.path}}</h4> "
        }
        var Regist = {
        	template:"<h4>用户注册222。。获取参数{{$route.params}} , {{$route.path}}</h4>"
        }
        //2.配置路由
        const routers=[
        {
        	path:'/home',
        	component:Home
        },
        {
        	path:'/User',
        	component:User,
        	children:[
        	{
        		path:'login',
        		component:Login
        	},
        	{
        		path:'Regist/:username/:password',
        		component:Regist
        	}
        	]
        },
        {
        	path:'*',
            	redirect:'/home'//重定向
            }
            ];
        //3.创建路由实例
        const router = new VueRouter({
        	routes:routers,
            mode:'history',//更改模式，history模式点击后链接中不会有# ，默认模式hash
            linkActiveClass:'active'
        });
        new Vue({
        	el:'.container',
        	methods:{
        		push(){
        			router.push({path:'home'});//添加路由，其实就是切换路由
        		},
        		replace(){
        			router.replace({path:'user'});
        		}
        	},
            router:router //注册路由
        });
    </script>
</body>
</html>